<template>
  <div class="box">
    <span class="time" @click="gohome">{{timeshow}}   跳过</span>
    <img src="/img/startpage/picture.png" alt="">
    <h1>孕育宝宝美好时光</h1>
    <div class="logo">
      <img src="/img/startpage/LOGO.png" alt="">
      <p>康宝宝</p>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      timeshow: 3, // 倒计时
      timer1: null // 计时器
    }
  },
  mounted () {
    this.timer()
  },
  methods: {
    gohome () {
      this.$router.replace('/home')
      clearInterval(this.timer1)
    },
    timer () { // 计时器
      this.timer1 = setInterval(() => {
        this.timeshow -= 1
        if (this.timeshow === 0) {
          this.$router.replace('/home')
          clearInterval(this.timer1)
        }
      }, 1000)
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/lib/reset.scss';
.box{
  @include rect(100%,100%);
  @include padding(.65rem .51rem);
  position: relative;
  .time {//自己加的倒计时和跳过
    @include rect(.5rem,.2rem);
    text-align: center;
    border-radius: .1rem;
    background-color: #FCCE00;
    position: absolute;
    right: 0.15rem;
    top: 0.15rem;
    opacity: .8;
    font-size: .12rem;
  }
  img {
    @include rect(2.72rem,2.4rem);
  }
  h1 {
    @include font-size(.3rem);
    @include font-weight(500);
    text-align: center;
    line-height: .3rem;
    font-family:LingWai SC;//字体没变化
    @include margin(.38rem 0 1.54rem 0)
  }
  .logo {
    text-align: center;
    img {
      @include rect(.68rem,.68rem);
    }
    p {
      font-size:.15rem;
      font-family:PingFang SC;//字体没变化
      font-weight:500;
      color:rgba(51,51,51,1);
      line-height:.18rem;
    }
  }
}
</style>
